<template>
  <div class="back">
    <div class="titleBox">
      <div class="titleContent">
        <img src="../assets/logo.png" />
        <div class="titleText">心情系统 监测大屏</div>
      </div>
    </div>
    <div style="width: 98.5%; height: 100%; padding: 0 1%" class="content">
      <div class="contentLeft">
        <div class="difficulty1" >
          <div class="difficulty">
            <div class="Boxdifficulty">
              <div>关心情的建议</div>
              <div>
                <!-- <span style="color: rgba(245, 189, 67, 1); font-size: 24px"
                  >160.5</span
                >
                <span style="font-size: 15px"> EH/s</span> -->
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 100%">
            <div
              style="
                padding-left: 4%;
                text-align: left;
                color: #ffffff;
                font-size: 12px;
              "
            >
            </div>
            <div id="main" style="width: 100%; height:14vh"></div>
          </div>
        </div>

        <div class="difficulty1">
          <div class="difficulty">
            <div class="Boxdifficulty">
              <div>学生信息</div>
            </div>
          </div>

          <div
            style="
              align-items: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <table>
              <tr>
                <th class="box with-triangle">姓名</th>
                <th class="box with-triangle">账号</th>
                <th>心情</th>
                <!-- <th>Mix</th> -->
              </tr>
            </table>
            <div style="width: 95%; height: 2px; background: #6187e4"></div>
            <table style="position: relative; top: -20px">
              <br>
              <tr
                v-for="(record, index) in listss"
                :key="index"
              >
               <th>{{ record.userName }}</th>
                <th>{{ record.accountNumber }}</th>

                   <th class="timeline-mood">{{
                record.moodIndex == 1
                  ? "狂喜"
                  : record.moodIndex == 2
                  ? "开心"
                  : record.moodIndex == 3
                  ? "一般"
                  : record.moodIndex == 4
                  ? "伤心"
                  : "难过"
              }}</th>
                <!-- <th>Mix</th> -->
              </tr>

              <!-- 更多行和单元格... -->
            </table>
          </div>
        </div>

        <div class="difficulty1">
          <div class="difficulty">
            <div class="Boxdifficulty">
              <div>学生分布图</div>
            </div>
          </div>
          <div style="position: relative">
            <div
              class="circle"
              style="position: absolute; top: 24px; left: 140px"
            ></div>
            <div
              class="circle1"
              style="position: absolute; top: 29px; left: 270px"
            ></div>
            <div
              class="circle2"
              style="position: absolute; top: 14px; left: 370px"
            ></div>
            <div
              class="circle2"
              style="position: absolute; top: 84px; left: 270px"
            ></div>
            <div
              class="circle2"
              style="position: absolute; top: 70px; left: 360px"
            ></div>
            <img
              src="../assets/map.png"
              style="width: 65%; height:11.8vh; position: relative; "
            />
          </div>
        </div>
      </div>

      <div class="contentCenter contentLeft">
        <div class="ballBox" @click="clickFun" style="height:100vh;align-items: center;">
          <div>
            <img
              src="../assets/ball.png"
              style="width: 280px"
              class="ballDBoxs"
            />
          </div>
          <div>
            <!-- <img
              src="../assets/22.gif"
              style="width: 100%; position: relative; top: -15px"
              class="ballDBox"
            /> -->
          </div>
        </div>

        <!-- <div class="difficulty1">
          <div class="difficulty">
            <div class="Boxdifficulty">
              <div>Global Hashrate Distribution</div>
            </div>
          </div>

        </div> -->
      </div>

      <div class="contentLeft">
        <div class="difficulty1" style="height: 70%;">
          <div class="difficulty">
            <div class="Boxdifficulty">
              <div>当前心情占比</div>
            </div>
          </div>

          <div
            style="
              align-items: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
            class="Evaluation"
          >
            <table>
              <tr>
                <th class="box with-triangle">姓名</th>
                <th>时间</th>
                <th>心情</th>
                <th></th>
                <th></th>
                <th></th>
              </tr>
            </table>
            <div style="width: 95%; height: 2px; background: #6187e4"></div>
            <table style="position: relative; top: -20px">
              <tr style="visibility: hidden">
                <th class="box with-triangle">Miner ID</th>
                <th>Area</th>
                <th>Latency</th>
                <th>Blocks</th>
                <th>Mix</th>
              </tr>

              <tr v-for="(record,index) in  lists" :key="index">
                <td>{{ name[0] }}</td>
                <td style="width: 90%;">{{ record.creatTime.split(' ')[0] }}</td>
                <td class="timeline-mood">{{
                record.moodIndex == 1
                  ? "狂喜"
                  : record.moodIndex == 2
                  ? "开心"
                  : record.moodIndex == 3
                  ? "一般"
                  : record.moodIndex == 4
                  ? "伤心"
                  : "难过"
              }}</td>
                <td style="display: flex; align-items: center">
                  <span style="visibility: hidden"> 0 </span>{{(record.moodIndex)*10 * 2}}%
                  <div class="progress-container">
                    <div class="progress-bar" :style="{width:(record.moodIndex)*10 * 20 +' %'}"></div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <div class="difficulty1" style="height: 20vh">
          <div class="difficulty">
            <div class="Boxdifficulty">
              <div>预警信息</div>
            </div>
          </div>
          <div
            style="
              align-items: center;
              display: flex;
              width: 100%;
              text-align: left;
              justify-content: center;
            "
          >
            <div
              style="
                display: flex;
                margin-top: 13px;
                width: 85%;
                justify-content: center;
                align-items: center;
                align-items: flex-start;
                color: #ffffff;
                justify-content: flex-start;
              "
              v-for="(item, index) in warningList"
              :key="index"
            >
              <img src="../assets/warning.png" />
              <div style="margin-left: 8px; height: 20vh">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="popUp" class="popUpBox">
      <div style="display: flex; flex-direction: column" class="popUpBoxB">
        <div style="width: 100%; z-index: 4; position: relative">
          <img src="../assets/SpopUp.png" />
          <div
            style="
              position: absolute;
              top: 16px;
              color: #ffffff;
              font-size: 20px;
              left: 50px;
            "
          >
             您的在线ai助手
            <img
              src="../assets/clone.png"
              style="position: relative; left: 140px; cursor: pointer"
              @click="popUp = false"
            />
          </div>
          <div></div>
        </div>
        <div style="width: 102%; position: relative; left: -20px">
          <img src="../assets/BpopUp.png" class="BpopUp" />
          <div class="listBox">
            <div
              v-for="(item, index) in list"
              :key="index"
              :style="{
                justifyContent: item.id == 2 ? 'flex-end' : '',
                display: item.id == 2 ? 'flex' : '',
              }"
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  color: #ffffff;
                  margin-bottom: 10px;
                "
                v-if="item.id == 1 || item.id == 3"
              >
                <div>
                  <img
                    :style="{ visibility: index != 4 ? '' : 'hidden' }"
                    src="../assets/titleD.png"
                    alt=""
                    style="margin-right: 10px; width: 30px"
                  />
                </div>
                <div v-if="item.id == 3" style="margin-top: 5px">
                  {{ item.content }}
                  <div class="blinking-text">稍等</div>
                </div>
                <div v-else style="margin-top: 5px">
                  {{ item.content }}
                  <div class="blinking-text" style="visibility: hidden">
                    稍等
                  </div>
                  <div class="blinking-text"></div>
                </div>
              </div>
              <div
                style="
                  display: flex;
                  align-items: center;
                  color: #ffffff;
                  width: 314px;
                  margin-bottom: 10px;
                  padding: 2%;
                  background: rgba(36, 57, 110, 0.3);
                  border-radius: 13px;
                "
                v-else
              >
                <div></div>
                {{ item.content }}
              </div>
            </div>
            <div class="inputs">
              <a-input
                               v-model:value="message"
                               type="textarea"
                               @keyup.enter.native="handleEnter"
                               rows="5"
                               maxlength="150"
                               style="resize: none;"
                           ></a-input>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { ProgressPath } from 'vue-progress-path';
// import Draggable from "vuedraggable";
import * as echarts from "echarts";
// @ is an alias to /src
import { earlyWarning, histogram ,selectUserList} from "@/api/Login";
import { renderSlot } from "vue";
export default {
  components: {
    // ProgressPath
    // Draggable,
  },
  data() {
    return {
      list: [],
      issanB: true,
      aprogress: 50,
      bprogress: 50,
      cprogress: 50,
      isDragging: false,
      isDragging2: false,
      isDragging1: false,
      message: "",
      textareaText: "",
      popUp: false,
      num: 1,
      name: [],
      progress2: 20,
      warningList: [],
      progress1: 30,
      lists: [],
      listss:[],
      progress: 50, // 初始进度百分比
    };
  },
  name: "HomeView",
  mounted() {
    let html = document.getElementsByTagName("html")[0];
    let width = 1920;
    let height = (width * html.clientHeight) / html.clientWidth;
    let zoom = html.clientWidth / width;
    document.body.style.width = width + "px";
    document.body.style.height = height + "px";
    document.body.style.webkitTransform = "scale(" + zoom + ")";
    document.body.style.webkitTransformOrigin = "0 0 0";
    let reloadDelay;
    window.addEventListener("resize", function () {
      clearInterval(reloadDelay);
      reloadDelay = setInterval(function () {
        location.reload();
      }, 500);
    });
    earlyWarning().then((res) => {
      this.warningList = res.data;
      console.log(this.warningList);
    });
    this.mainFun();
    histogram().then((res) => {
      this.name = Object.keys(res.data);
      // this.lists = res.data[ this.name[0]]
      // console.log( this.lists)
      console.log(res.data[this.name[0]]);
      for (let i in res.data[this.name[0]]) {
        this.lists.push(res.data[this.name[0]][i]);
      }
    });
    selectUserList().then((res) => {
      this.listss = res.data
    });

    console.log(this.lists);
    // this.main1Fun();
    // this.main3Fun();
    // this.main2Fun();
  },
  methods: {
    SubmitFun() {
      this.aprogress = Math.round(this.progress);
      this.bprogress = Math.round(this.progress1);
      this.cprogress = Math.round(this.progress2);
    },
    issanBFun() {
      this.issanB = !this.issanB;
    },
    startDrag(event) {
      event.preventDefault();
      this.isDragging = true;
      document.addEventListener("mousemove", this.updateProgress);
      document.addEventListener("touchmove", this.updateProgress);
      document.addEventListener("mouseup", this.endDrag);
      document.addEventListener("touchend", this.endDrag);
    },
    updateProgress(event) {
      if (this.isDragging) {
        const rect = this.$refs.progressBars.getBoundingClientRect();
        const x = event.clientX || event.touches[0].clientX;
        const width = rect.width;
        this.progress = ((x - rect.left) / width) * 100;
      }
    },
    endDrag() {
      if (this.isDragging) {
        this.isDragging = false;
        document.removeEventListener("mousemove", this.updateProgress);
        document.removeEventListener("touchmove", this.updateProgress);
        document.removeEventListener("mouseup", this.endDrag);
        document.removeEventListener("touchend", this.endDrag);
      }
    },
    startDrag1(event) {
      event.preventDefault();
      this.isDragging1 = true;
      document.addEventListener("mousemove", this.updateProgress1);
      document.addEventListener("touchmove", this.updateProgress1);
      document.addEventListener("mouseup", this.endDrag1);
      document.addEventListener("touchend", this.endDrag1);
    },
    updateProgress1(event) {
      if (this.isDragging1) {
        const rect = this.$refs.progressBarss.getBoundingClientRect();
        const x = event.clientX || event.touches[0].clientX;
        const width = rect.width;
        this.progress1 = ((x - rect.left) / width) * 100;
      }
    },
    endDrag1() {
      if (this.isDragging1) {
        this.isDragging1 = false;
        document.removeEventListener("mousemove", this.updateProgress1);
        document.removeEventListener("touchmove", this.updateProgress1);
        document.removeEventListener("mouseup", this.endDrag);
        document.removeEventListener("touchend", this.endDrag);
      }
    },
    startDrag2(event) {
      event.preventDefault();
      this.isDragging2 = true;
      document.addEventListener("mousemove", this.updateProgress2);
      document.addEventListener("touchmove", this.updateProgress2);
      document.addEventListener("mouseup", this.endDrag2);
      document.addEventListener("touchend", this.endDrag2);
    },
    updateProgress2(event) {
      if (this.isDragging2) {
        const rect = this.$refs.progressBarsss.getBoundingClientRect();
        const x = event.clientX || event.touches[0].clientX;
        const width = rect.width;
        this.progress2 = ((x - rect.left) / width) * 100;
      }
    },
    endDrag2() {
      if (this.isDragging2) {
        this.isDragging2 = false;
        document.removeEventListener("mousemove", this.updateProgress2);
        document.removeEventListener("touchmove", this.updateProgress2);
        document.removeEventListener("mouseup", this.endDrag2);
        document.removeEventListener("touchend", this.endDrag2);
      }
    },
    handleEnter() {
      // 在这里处理回车事件
      this.list.push({
        id: 2,
        content: this.message,
      });
      // this.message = "";
      let text = "正在思考. ";
      text = "正在思考. ";
      this.list.push({
        id: 3,
        content: text,
      });
      // setTimeout(() => {
      //   this.list[this.list.length-1].id =1
      //     this.list.push({
      //   id: 1,
      //   content:  "The miners report has been sent\n" +
      //       "to your email. Let me know what\n" +
      //       "else you need. ",
      // });
      //   }, 4000);
      this.num += 1;
    },
    ariaAtomic() {},
    clickFun() {
      this.popUp = true;
      this.list = [];
      setTimeout(() => {
        this.list.push({ id: 1, content: "我可以帮您什么?" });
      }, 800);
    },
    setProgress(event) {
      const rect = this.$refs.progressBar.getBoundingClientRect();
      this.progress = ((event.clientX - rect.left) / rect.width) * 100;
    },
    main1Fun() {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        grid: {
          top: 30,
          bottom: 40,
          right: 50,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                type: "dashed",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            axisTick: {
              show: false,
            },
            data: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
          },
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                type: "dashed",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            show: false,
            data: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
          },
        ],
        yAxis: [
          {
            nameTextStyle: {
              color: "#ffffff", // 红色
            },
            name: "(MWh)",
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            splitLine: {
              textStyle: {
                color: "#ffffff",
              },
              show: true,
              lineStyle: {
                color: "rgba(178, 194, 211, 0.1)",
                type: "dashed",
              },
            },
          },
          {
            nameTextStyle: {
              color: "#ffffff", // 红色
            },
            boundaryGap: false,
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            name: "(W/TH)",
            splitLine: {
              textStyle: {
                color: "#ffffff",
              },
              show: true,
              lineStyle: {
                color: "rgba(178, 194, 211, 0.1)",
                type: "dashed",
              },
            },
          },
        ],
        // legend: {
        //   data: ["折线图"],
        //   icon: "rect", // 设置图例为正方形
        //   itemWidth: 20, // 可选，设置图例标记的宽度
        //   itemHeight: 14, // 可选，设置图例标记的高度
        // },
        series: [
          {
            barWidth: "40%",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              // 定义一个用于生成长方形蓝色的回调函数

              opacity: 0.9,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgb(48,146,228)" },
                { offset: 1, color: "rgb(36,113,220)" },
              ]),
            },
          },
          {
            name: "折线图",
            smooth: true, // 使折线变成平滑曲线
            symbol: "none", // 去掉小点
            data: [100, 50, 150, 218, 135, 147, 260],
            type: "line",
            lineStyle: {
              color: "rgba(215, 201, 51, 1)", // 这里设置为红色
              width: 2, // 线宽
            },
            yAxisIndex: 1,
            xAxisIndex: 1,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  // 渐变颜色
                  {
                    offset: 0,
                    color: "rgba(215, 201, 51, 0.5)",
                  },
                  {
                    offset: 1,
                    color: "rgba(215, 201, 51, 0)",
                  },
                ],
                global: false,
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    main3Fun() {
      var chartDom = document.getElementById("main3");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        grid: {
          top: 10,
          bottom: 50,
          left: 50,
          right: 50,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                type: "dashed",
              },
            },

            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 0)",
              },
            },
            axisTick: {
              show: false,
            },
            data: ["Nov 2024", "Dec 2024", "Jan 2025"],
          },
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                type: "dashed",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 0)",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              //坐标轴轴线
              show: false,
            },
            nameTextStyle: {
              color: "#ffffff", // 红色
            },
            name: "(EH/s)",
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            splitLine: {
              textStyle: {
                color: "#ffffff",
              },
              show: true,
              lineStyle: {
                color: "rgba(178, 194, 211, 0)",
                type: "dashed",
              },
            },
          },

          {
            nameTextStyle: {
              color: "#ffffff", // 红色
            },
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            boundaryGap: false,
            type: "value",
            name: "(T)",
            splitLine: {
              textStyle: {
                color: "#ffffff",
              },
              show: true,
              lineStyle: {
                color: "rgba(178, 194, 211, 0)",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            itemStyle: {
              // 设置柱形图颜色
              color: "transparent",
            },
            barWidth: "40%",
            data: [800],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "transparent",
            },
          },
          {
            name: "折线图",
            smooth: true, // 使折线变成平滑曲线
            symbol: "none", // 去掉小点
            data: [120],
            type: "line",
            backgroundStyle: {
              color: "transparent",
            },
            yAxisIndex: 1,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    main2Fun() {
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        grid: {
          top: 30,
          bottom: 40,
          right: 20,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                type: "dashed",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            axisTick: {
              show: false,
            },
            data: ["Next 6H ", "Next 12H ", "Next 18H ", "Next 24H "],
          },
        ],
        yAxis: [
          {
            nameTextStyle: {
              color: "#ffffff", // 红色
            },
            name: "(BTC)",
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            splitLine: {
              textStyle: {
                color: "#ffffff",
              },
              show: true,
              lineStyle: {
                color: "rgba(178, 194, 211, 0.1)",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            itemStyle: {
              // 设置柱形图颜色
              color: "transparent",
            },
            barWidth: "40%",
            data: [30],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "transparent",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    mainFun() {
      let name = [];
      histogram().then((res) => {
        name = Object.keys(res.data);
        console.log(name);
        for (let i in res) {
        }
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          grid: {
            top: 20,
            bottom: 40,
            right: 10,
          },
          xAxis: {
            type: "category",
            axisLine: {
              lineStyle: {
                type: "dashed",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            axisTick: {
              show: false,
            },
            data: name,
          },
          yAxis: {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(199, 211, 238, 1)",
              },
            },
            splitLine: {
              textStyle: {
                color: "#ffffff",
              },
              show: true,
              lineStyle: {
                color: "rgba(178, 194, 211, 0.1)",
                type: "dashed",
              },
            },
          },
          series: [
            {
              barWidth: "40%",
              data: [120, 200, 150, 80, 70, 110, 130],
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
              itemStyle: {
                // 定义一个用于生成长方形蓝色的回调函数

                opacity: 0.9,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(48,146,228)" },
                  { offset: 1, color: "rgb(36,113,220)" },
                ]),
              },
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },
  },
};
</script>
<style lang="scss">
.progress-bar {
  position: relative;
  height: 5px;
  background-color: #e5e5e5;
  border-radius: 2px;
  cursor: pointer;
}

.progress {
  position: absolute;
  height: 100%;
  background: linear-gradient(-90deg, #02c4e1 0%, rgba(0, 52, 108, 0) 100%);
  border-radius: 2px;
  transition: width 0.1s ease;
}
.progress-path {
  stroke: #3498db; /* 进度条颜色 */
}
@keyframes blink {
  from {
    width: 0;
  }
  to {
    width: 0.5ch; /* 假设每个字符宽度大约是0.5ch */
  }
}

.article {
  animation: blink 0.5s steps(1) infinite;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}
.el-textarea__inner {
  background: transparent;
  color: #ffffff;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.blinking-text {
  font-size: 15px;
  animation: blink 1s infinite;
}
textarea {
  background-color: transparent;
  border: none;
  width: 100%;
  // height: 100%;
  color: #ffffff;
  outline: none; /* 去除焦点时的边框 */
}
.listBox {
  position: absolute;
  top: 20px;
  height: 80%;
  left: 60px;
  width: 75%;
  .inputs {
    bottom: 5px;
    left: -15px;
    width: 400px;
    height: 114px;
    position: absolute;
    background: #000f27;
    border: 1px solid #005cb9;
  }
}
.popUpBoxB {
  width: 50%;
}
.BpopUp {
  width: 100%;
  position: relative;
  // left: -19px;
  top: -70px;
}
.popUpBox {
  top: 0;
  top: 0;
  left: 450px;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  position: absolute;
}
.ballDBox {
  display: none;
}
.ballBox {
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin: 10px 0;
}
.ballBox:hover .ballDBox {
  display: block;
}
.ballBox:hover .ballDBoxs {
  display: none;
}

.contentCenterBox {
  width: 29%;

  .contentCenterBoxRight {
    width: 80%;
    display: flex;
    margin-left: 2px;
    flex-direction: column;
    align-items: flex-start;
    color: rgba(199, 211, 238, 1);
    font-size: 15px;
    justify-content: center;
    .num {
      font-weight: bold;
      color: #ffffff;
      font-size: 23px;
      background: -webkit-linear-gradient(
        rgba(183, 125, 0, 1),
        rgba(245, 189, 67, 1)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.circle {
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: rgba(0, 255, 198, 0.3);
  position: relative;
}
/* 伪元素实现中间的小圆 */
.circle:after {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 255, 198, 0.7);
  /* 垂直居中定位 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.circle1 {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: rgba(0, 255, 198, 0.3);
  position: relative;
}
/* 伪元素实现中间的小圆 */
.circle1:after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(0, 255, 198, 0.7);
  /* 垂直居中定位 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.circle2 {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: rgba(0, 255, 198, 0.3);
  position: relative;
}
/* 伪元素实现中间的小圆 */
.circle2:after {
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(0, 255, 198, 0.7);
  /* 垂直居中定位 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

table {
  justify-content: center;
  width: 95%;
  border-collapse: collapse;
}

/* 单行颜色（奇数行） */
tr:nth-child(odd) {
  background-color: rgba(36, 57, 110, 0.2);
}

/* 双行颜色（偶数行） */
tr:nth-child(even) {
  background-color: rgba(36, 57, 110, 0.1);
}

/* 设置单元格样式 */
th,
td {
  text-align: center;
  color: #c3d6ee;
  border: 1px solid transparent;
  padding: 5px;
  height: 2vh;
  font-size: 12px;
}
.progress-container {
  width: 90px;
  background: rgb(12, 33, 67);
  height: 6px;
  margin-left: 5px;
  overflow: hidden; /* 确保子元素不超出容器 */
}

.progress-bar {
  width: 20%; /* 进度条的宽度，可以根据需要更改 */
  height: 6px; /* 进度条的高度 */
  background: rgba(0, 52, 108, 1);
  transition: width 0.5s ease; /* 进度条宽度变化的过渡效果 */
}

.Evaluation {
  .progress-container {
    width: 90px;
    background: rgb(12, 33, 67);
    height: 6px;
    margin-left: 5px;
    overflow: hidden; /* 确保子元素不超出容器 */
  }

  .progress-bar {
    width: 20%; /* 进度条的宽度，可以根据需要更改 */
    height: 6px; /* 进度条的高度 */
    background: linear-gradient(90deg, rgba(3, 124, 0, 1), rgba(9, 198, 0, 1));
    transition: width 0.5s ease; /* 进度条宽度变化的过渡效果 */
  }
}
/* 标题行样式 */
th {
  width: 200px;
  background: linear-gradient(to top, rgb(2, 42, 88), rgb(0, 20, 51));
  color: white;
}
.box {
  position: relative;
  // width: 300px;
  margin-top: 30px; /* 为了显示效果更明显 */
}
.with-triangle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 0;
  border-color: rgba(245, 189, 67, 1) transparent transparent transparent;
}
.back {
  background-image: url("../assets/back.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  overflow: hidden;
  height: 869px;
}
.titleText {
  font-weight: bold;
  color: #ffffff;
  font-size: 29px;
  background: -webkit-linear-gradient(#ffffff, #f5bd43);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1vh;
  align-items: center;
  justify-content: center;
}
.titleBox {
  background-image: url("../assets/title.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  .titleContent {
    display: flex;
    height: 60%;
    width: 40%;
    margin-bottom: 1vh;
    justify-content: center;
    align-items: center;

    // width: 10%;
  }
  // img{
  //   width: 100%;
  // }
}
.colorText {
}
.content {
  display: flex;
  justify-content: space-evenly;
}
.contentLeft {
  width: 27%;
  height:56vh;
  display: flex;
  flex-direction: column;
}
.contentCenter {
  width: 45%;
  height: 100%;
}
.contentRight {
  width: 27%;
  height: 100%;
}

.difficulty1 {
  height: 19%;

  background-image: url("../assets/hashrate.png");
  background-size: 100% 100%;
  width: 99%;
  height:35%;
}
.difficulty {
  display: flex;
  font-weight: bold;
  font-size: 23px;
  color: #ffffff;
  text-shadow: 0px 2px 1px rgba(5, 28, 55, 0.8);
  background: linear-gradient(
    0deg,
    rgba(14, 197, 236, 0.7) 0%,
    rgba(245, 189, 67, 0.7) 0%,
    rgba(239, 252, 254, 0.7) 58.7646484375%
  );

  background-image: url("@/assets/difficulty.png");
  background-size: 100% 100%;
  width: 99%;
  height: 5vh;

  .Boxdifficulty {
    display: flex;
    justify-content: space-between;
    width: 85%;
    height: 4vh;
    margin-left: 12%;
    color: #ffffff;
    background: -webkit-linear-gradient(#ffffff, #f5bd43);
    -webkit-background-clip: text;
    position: relative;
    top: 6px;
  }
}
.backdifficulty1 {
  background-image: url("@/assets/backL.png");
  background-size: 100% 100%;
}
</style>
